<template>
    <view class="order-detail-item" v-if="data">
        <image
            v-if="!getAppSet().isHideImg"
            class="product-img"
            mode="aspectFill"
            :src="data.ProductImage ? easyGetImgUrl(data.ProductImage) : '/static/img/no-img.jpg'"></image>
        <view class="product-info">
            <text class="product-name">{{ data.Name }}</text>
            <text class="product-desc" v-if="data.DisplayAttribute">{{ data.DisplayAttribute }}</text>
        </view>
        <view class="product-right">
            <text class="product-price price-text">￥{{ data.Price }}</text>
            <text class="product-num">x{{ data.Amount }}{{ data.UnitName ? data.UnitName : data.RationUnit }}</text>
        </view>
    </view>
</template>

<script>
export default {
    props: {
        data: {
            type: Object,
            default: {},
        },
    },
    data() {
        return {}
    },
    methods: {},
}
</script>

<style lang="scss">
.order-detail-item {
    display: flex;
    flex-direction: row;
    margin-bottom: 30rpx;
    align-items: center;
    .product-img {
        width: 120rpx;
        height: 120rpx;
        border-radius: $border-radius-10;
        margin-right: 15rpx;
    }
    .product-info {
        display: flex;
        flex-direction: column;
        flex: 1;
        justify-content: center;
        .product-name {
            font-weight: 500;
            font-size: $font-size-26;
            color: $app-color-text-main;
            margin-bottom: 6rpx;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            word-break: break-all;
        }
        .product-desc {
            font-size: $font-size-20;
            color: $app-color-text-tip;
            margin-bottom: 20rpx;
        }
        .product-bottom {
            display: flex;
            flex-direction: row;
            align-items: center;

            .product-name {
                product-num: $font-size-24;
                color: $color-black;
            }
        }
    }
    .product-right {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        .product-price {
            font-size: $font-size-28;
            margin-bottom: 6rpx;
        }
    }
}
</style>
